<template>
  <!--顶部-->
  <div class="wrapper">
    <div class="position">
      <span class="iconfont position-back" @click="onClickLeft">&#xeb15;</span>
      <span class="inconfont position-font">评论</span>
    </div>
  </div>

  <!--评分-->
  <van-form @submit="onSubmit">
    <Rate ref="rateV"></Rate>

    <!-- 文本框-->
    <!-- 可以使用 CellGroup 作为容器 -->
    <div class="textarea">
      <van-cell-group inset>
        <van-field
          v-model="formDate.ratingCom"
          rows="4"
          label="评论"
          autosize
          type="textarea"
          maxlength="100"
          placeholder="请输入评论"
          :show-word-limit="true"
        />
      </van-cell-group>
    </div>

    <div class="updiv">
      <Upload ref="upload"></Upload>
    </div>

    <div style="margin: 80px; margin-top: 240px">
      <van-button round block type="primary" native-type="submit">
        提交
      </van-button>
    </div>
  </van-form>
</template>
<script setup>
import Rate from "../components/rate/Rate.vue";
import Upload from "../components/rate/Upload.vue";
import { useRoute } from "vue-router";
import { onMounted, reactive, ref } from "vue";
import http from "@/utils/request.js";

const onClickLeft = () => history.back();
const upload = ref();
const rateV = ref();
const { query, params } = useRoute();

const formDate = reactive({
  orderId: "",
  ratingCode: "",
  ratingCom: "",
  ratingIcon: "",
});

const value = ref("");
//提交
function onSubmit() {
  let list = upload.value.imgList;
  let imgList = [];
  for (let i = 0; i < list.length; i++) {
    imgList.push(list[i].url);
  }
  formDate.ratingIcon = JSON.stringify(imgList);
  formDate.ratingCode = rateV.value.value;
  http.post("/rating", formDate).then((res) => {
    if (res.data.code === "200") {
      //请求成功
    }
  });
}
onMounted(() => {
  formDate.orderId = params.orderId;
});
</script>


<style scoped lang="scss">
@import "../style/mixins.scss";
@import "../style/viriables.scss";

/*顶部导航栏 */
.wrapper {
  position: absolute;
  left: 0%;
  top: 0;
  right: 0;
  bottom: 50px;
  padding: 0 10px;
  background: #ffd000;
  height: 70px;

  .position {
    position: relative;
    padding: 16px 24px 40px;
    line-height: 22px;
    font-size: 16px;
    color: $content-fontcolor;
    //引入
    @include ellipse;

    &-back {
      position: absolute;
      left: 20px;
      top: 20px;
      font-size: 20px;
    }

    &-font {
      position: absolute;
      left: 45%;
      top: 22px;
      font-size: 25px;
      font-weight: bold;
    }
  }
}

.star {
  left: 15%;
  top: 110px;
  position: absolute;

  .font {
    margin-left: 15px;
    font-size: 20px;
    margin-bottom: 10px;
  }
}

.textarea {
  position: absolute;
  top: 150px;
  padding: 5px 20px 10px 30px;
}
</style>
